<template>
  <div class="hunk">
      <div class="search">
        <input type="text" placeholder="请输入地址、门牌号">
      </div>
      <div class="type-list">
        <div v-for="(item,index) in btnList" :key="index" :class="['item', item.color]" @click="clickBtn(item)">
          {{item.text}}
        </div>
      </div>
      <div class="home-list">
        <div class="home-item">
          <div class="home-name">江苏省南京市雨花台区软件谷人才公寓</div>
          <div class="item-list">
            <div :class="['one', typeList[0].bgcolor]" @click="clickitem(1)">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[0].bgcolor]">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
          </div>
        </div>
        <div class="home-item">
          <div class="home-name">江苏省南京市雨花台区软件谷人才公寓</div>
          <div class="item-list">
            <div :class="['one', typeList[0].bgcolor]" @click="clickitem(1)">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[0].bgcolor]">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
          </div>
        </div>
        <div class="home-item">
          <div class="home-name">江苏省南京市雨花台区软件谷人才公寓</div>
          <div class="item-list">
            <div :class="['one', typeList[0].bgcolor]" @click="clickitem(1)">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[0].bgcolor]">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
          </div>
        </div>
        <div class="home-item">
          <div class="home-name">江苏省南京市雨花台区软件谷人才公寓</div>
          <div class="item-list">
            <div :class="['one', typeList[0].bgcolor]" @click="clickitem(1)">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[0].bgcolor]">
              <div class="top" style="width:60px">
                <img v-if="typeList[0].img" :src="typeList[0].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type1">
                <img :src="typeList[0].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[1].bgcolor]">
              <div class="top" style="width:70px">
                <img v-if="typeList[1].img" :src="typeList[1].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type2">
                <img :src="typeList[1].type" alt="" srcset="">
              </div>
            </div>
            <div :class="['one', typeList[2].bgcolor]">
              <div class="top">
                <img v-if="typeList[2].img" :src="typeList[2].img" />
              </div>
              <div class="miaoshu">自持-6栋二单元304室</div>
              <div class="yuezu">
                <span>2738</span>
                /月
              </div>
              <div class="type type3">
                <img :src="typeList[2].type" alt="" srcset="">
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
import zichi from imgUrl+'house/zichi.png'
import tuoguan from imgUrl+'house/tuoguan.png'
import nodoor from imgUrl+'house/nodoor.png'
import zydq from imgUrl+'house/zydq.png'
import jjjz from imgUrl+'house/jjjz.png'
export default {
  data() {
    return {
      typeList: [
        { type: zichi, img: jjjz, bgcolor: 'zc'},
        { type: tuoguan, img: zydq, bgcolor: 'tg'},
        { type: nodoor, img: '', bgcolor: 'wbdm'}
      ],
      btnList: [
        { text: '全部', color: 'all', eventType: 'all' },
        { text: '空房', color: 'kong', eventType: 'kong' },
        { text: '已租', color: 'yizu', eventType: 'yizu' },
        { text: '接近交租', color: 'jjjz', eventType: 'jjjz' },
        { text: '租约快结束', color: 'zykjs', eventType: 'zykjs' },
        { text: '未绑定门锁', color: 'wbdms', eventType: 'wbdms' },
        { text: '自持', color: 'zc', eventType: 'zc' },
        { text: '托管', color: 'zc', eventType: 'tg' },
      ]
    }
  },
  computed: {
    
  },
  methods: {
    clickitem(item) {
      // console.log('dianji8989999999')
      this.$emit('clickitem',item)
    },
    clickBtn(item){
      // console.log('clickBtn',item)
      this.$emit('clickBtn',item)
    }
  },
  mounted() {
    
  }
}
</script>

<style lang="scss" scoped>
.hunk{
  width: 100vw;
  box-sizing: border-box;
  background: #F9F9F9;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .search{
    height: 50px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    input{
      width: 345px;
      height: 30px;
      background: #F3F2F6;
      border-radius: 20px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000;
      line-height: 30px;
      padding-left: 37px;
    }
    input::placeholder{
      color: #9B9B9B;
    }
  }
  .type-list{
    box-sizing: border-box;
    margin-top: 1px;
    height: 82px;
    background: #FFFFFF;
    padding: 10px 6px 0 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item{
      box-sizing: border-box;
      height: 26px;
      padding: 0 10px;
      margin: 0 9px 9px 0;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      line-height: 24px;
      text-align: center;
    }
    .all{
      background: rgba(255, 170, 88, 0.2);
      border: 1px solid #FFAA58;
      color: #FFAA58;
    }
    .kong{
      background: rgba(18, 203, 110, 0.2);
      border: 1px solid #00CF64;
      color: #00CF64;
    }
    .yizu{
      background: rgba(98, 136, 234, 0.2);
      border: 1px solid #6288EA;
      color: #6288EA;
    }
    .jjjz{
      background: rgba(255, 199, 45, 0.2);
      border: 1px solid #FFC72D;
      color: #FFC72D;
    }
    .zykjs{
      background: rgba(252, 145, 58, 0.2);
      border: 1px solid #FC913A;
      color: #FC913A;
    }
    .wbdms{
      background: rgba(130, 130, 130, 0.2);
      border: 1px solid #828282;
      color: #828282;
    }
    .zc{
      background: rgba(255, 170, 88, 0.2);
      border: 1px solid #FFC72D;
      color: #FFAA58;
    }
  }
  .home-list{
    flex: 1;
    overflow-y: auto;
    .home-item{
      background-color: #fff;
      padding: 20px 15px;
      margin: 10px 0;
    }
    .home-name{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 16px;
      padding-bottom: 10px;
    }
    .item-list{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .one{
        width: 108px;
        background: rgba(18, 203, 110, 0.2);
        border-radius: 4px;
        padding-bottom: 16px;
        margin: 10px 10px 0 0;
        position: relative;
        .top{
          width: 60px;
          height: 18px;
          // background: #FC913A;
          // border-radius: 4px 0px 12px 0px;
          // font-size: 10px;
          // font-family: PingFangSC-Regular, PingFang SC;
          // font-weight: 400;
          // color: #FFFFFF;
          // line-height: 18px;
          // text-align: center;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .miaoshu{
          width: 89px;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
          line-height: 17px;
          margin: 2px 10px;
        }
        .yuezu{
          margin-left: 10px;
          color: #4A4A4A;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 200;
          line-height: 17px;
          span{
            font-weight: 600;
            color: #FF5A65;
          }
        }
        .type1{
          width: 36px;
          height: 24px;
        }
        .type2{
          width: 39px;
          height: 31px;
        }
        .type3{
          width: 44px;
          height: 35px;
        }
        .type{
          position: absolute;
          right: 4px;
          bottom: 4px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      .wbdm{
        background: rgba(130, 130, 130, 0.2);
      }
      .zc{
        background: rgba(18, 203, 110, 0.2);
      }
      .tg{
        background: rgba(98, 136, 234, 0.2);
      }
      .one:nth-child(3n + 3){
        margin-right: 0;
      }
    }
  }
}
</style>
